<template>
  <div class="login">
    <div id="mws-login">
      <h1>Login</h1>
      <div class="mws-login-lock"><img src="../../static/css/icons/24/locked-2.png" alt="" /></div>
      <div id="mws-login-form">
        <form class="mws-form" method="post">
          <div class="mws-form-row">
            <div class="mws-form-item large">
              <input type="text" class="mws-login-username mws-textinput" placeholder="用户名" v-model="username" />
            </div>
          </div>
          <div class="mws-form-row">
            <div class="mws-form-item large">
              <input type="password" class="mws-login-password mws-textinput" placeholder="密码" v-model="password" />
            </div>
          </div>
          <div class="mws-form-row">
            <input type="button" value="登录" class="mws-button green mws-login-button"
                   @click="login" />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        baseUrl: 'http://47.95.200.225:80',
        username: '',
        password: '',
      }
    },
    methods: {
      login() {
        let self = this
        let params = new URLSearchParams()
        params.append('username', self.username)
        params.append('password', self.password)
        self.$ajax
          .post(self.baseUrl + '/login/', params)    //文章收藏
          .then(function (res) {
            if (res.data.status === 'ok') {
              let user = JSON.stringify(res.data.username[0])
              sessionStorage.setItem('userDetail', user)
              // alert('登录成功！')
              self.$router.push({path: '/checkList'})
            } else {
              alert('登录失败！')
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      },
    },
    mounted() {

    },
  }
</script>

<style scoped>
  .login {
    height: 100%;
  }
</style>
